<template>
  <div class="content-div">
    <div class="card-div">
      <van-form @submit="onSubmit">
        <van-field
          readonly
          clickable
          name="datetimePicker"
          v-model="formItem.start_time"
          label="开始时间"
          input-align="right"
          placeholder="选择开始时间"
          @click="showPicker = true"
          :rules="[{ required: true, message: '请选择开始时间' }]"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="datetime"
            title="选择开始时间"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="confirm"
          />
        </van-popup>
        <van-field
          readonly
          clickable
          name="datetimePicker"
          v-model="formItem.end_time"
          label="结束时间"
          input-align="right"
          placeholder="选择结束时间"
          @click="showPicker1 = true"
          :rules="[{ required: true, message: '请选择结束时间' }]"
        />
        <van-popup v-model="showPicker1" position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="datetime"
            title="选择结束时间"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="confirm1"
          />
        </van-popup>
        <div class="break-div">
          <van-cell title="暂停接单原因：">
          </van-cell>
        </div>
        <div class="reason-div">
          <van-field
            v-model="formItem.reason"
            placeholder="请填写拒绝理由"
            rows="2"
            autosize
            type="textarea"
            maxlength="50"
            show-word-limit
            :rules="[{ required: true, message: '请填写拒绝理由' }]"
          />
        </div>
        <div class="gn-btn-box">
          <van-button class="gn-btn" round block type="info" native-type="submit">提交</van-button>
          <!-- <div class="gn-btn" native-type="submit">提  交</div> -->
        </div>
      </van-form>
    </div>
    <van-row type="flex" justify="center">
      <van-col class="flex row-center mt8 fs12 color1" span="8" @click="$router.push('/breakOrderList')">查看申请列表</van-col>
    </van-row>
  </div>
</template>
<script>
import { date0str } from '@/api/medical.js'
import { insertAccompanyingPhysicianCease } from '@/api/medicalWaiter.js'
import { Toast } from 'vant'
export default {
  name: 'breakOrder',
  data () {
    return {
      formItem: {},
      showPicker: false,
      showPicker1: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date()
    }
  },
  computed: {
    accompanying_physician_id () {
      return this.$store.state.user.severUserInfo.accompanying_physician_id
    }
  },
  methods: {
    confirm (value) {
      console.log(value)
      this.showPicker = false
      this.formItem.start_time = date0str(value)
    },
    confirm1 (value) {
      console.log(value)
      this.showPicker1 = false
      this.formItem.end_time = date0str(value)
    },
    onSubmit (value) {
      this.formItem.accompanying_physician_id = this.accompanying_physician_id
      insertAccompanyingPhysicianCease(this.formItem).then(res => {
        if (res.data.errcode === 0) {
          Toast.success('提交申请成功')
          return
        }
        Toast.fail(res.data.errmsg)
      })
    }
  },
  mounted () {}
}
</script>
<style scoped lang="less">
  .content-div {
    padding: 8px;
    background-color: #f2f3f7;
    height: 100%;
    .card-div {
      padding: 0px 8px 8px 8px;
      height: auto;
      background-color: #ffffff;
    }
    .break-div .van-cell::after {
      border-bottom: 0px;
    }
    .reason-div {
      padding: 8px;
      background-color: #f8f8f8;
      border-radius: 6px;
      .van-cell {
        background-color: #f8f8f8;
        padding: 0px;
      }
    }
    .flex {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .row-center {
      justify-content: center;
    }
    .gn-btn-box{
      height: 58px;
      position: fixed;
      bottom: 50px; // 不显示底部tabbar暂时注释掉，需要的时候解开即可
      // bottom: 0px;
      left: 0;
      background-color: #FFFFFF;
      width: 100%;
      box-sizing: border-box;
      padding: 10px;
      box-shadow: 0 0 10px 0 #CCCCCC;
      .gn-btn{
        height: 38px;
        line-height: 38px;
        text-align: center;
        background-color: rgba(89,89,255,.07);
        color: #1989fa;
        border-radius: 6px;
        box-sizing: border-box;
        border: 1px solid #1989fa;
      }
    }
    .mt8 {
      margin-top: 8px;
    }
    .fs12 {
      font-size: 12px;
    }
    .color1 {
      color: #1989fa;
    }
    .cur {
      cursor: pointer;
    }
  }
</style>
